<script setup lang="ts">

import {computed, onMounted, ref, watch} from 'vue';
import axios from 'axios';
import {useRouter} from "vue-router";
import {ElMessage, ElPagination} from 'element-plus';
import {useUserInfoStore} from "@/stores/userInfo.js";
import {getUserInfoService} from "@/api/user.js";
import {
  getCountService,
  getPopularJobService,
  getPopularCompanyAndJobService,
  getTopJobService,
  JobListService
} from "@/api/job.js";
import {Search, Location} from '@element-plus/icons-vue'

const router = useRouter();

const searchForm = ref({
  jobTitle: '',
  location: '',
});

//获取用户信息
const userInfo = ref({})

async function getUserInfo(){
  let res = await getUserInfoService()
  userInfo.value = res.data
}

getUserInfo();

//首页搜索
const searchJobs = () => {
  if (searchForm.value.jobTitle === '' && searchForm.value.location === '') {
    router.push(`/JobList`)
  }else if(searchForm.value.jobTitle === '' && searchForm.value.location!== ''){
    router.push(`/JobList/none/${searchForm.value.location}`)
  }else if(searchForm.value.jobTitle!== '' && searchForm.value.location === ''){
    router.push(`/JobList/${searchForm.value.jobTitle}`)
  }else{
    router.push(`/JobList/${searchForm.value.jobTitle}/${searchForm.value.location}`)
  }
};

const liveJobsCount = ref(null);    //岗位数量
const companiesCount = ref(null);   //公司数量

async function getCounts() {
  let res = await getCountService()
  liveJobsCount.value = res.data[0];
  companiesCount.value = res.data[1];
}

getCounts();

const popularCompanyAndJob = ref([
  {
    company: [
      {companyId: 'COMP11111',
        name: '绿动未来能源',
        phone: '021-22223333',
        introduction: '专注于绿色能源的研发与应用，推动清洁能源的普及与发展。',
        status: 'A轮',
        size: '50-100人',
        address: '上海市浦东新区绿色大道88号',
        companyType: '新能源'
      }
    ],
    jobList: [
      {
        jobId: 'JOB123',
        name: '软件工程师',
        companyName: '示例科技',
        salary: '15k-30k',
        tags: 'Java, Spring Boot, Docker',
        location: '上海',
        hr: '张三',
        description: '负责软件开发...',
        degree: '本科',
        experience: '3-5年'
      },
      {
        jobId: 'JOB456',
        name: '前端开发者',
        companyName: '创新网络',
        salary: '12k-25k',
        tags: 'Vue.js, React, HTML/CSS',
        location: '北京',
        hr: '李四',
        description: '负责网站前端架构设计与开发...',
        degree: '专科',
        experience: '2-4年'
      },
    ]
  },
  {
    company: [
      {companyId: 'COMP11111',
        name: '绿动未来能源',
        phone: '021-22223333',
        introduction: '专注于绿色能源的研发与应用，推动清洁能源的普及与发展。',
        status: 'A轮',
        size: '50-100人',
        address: '上海市浦东新区绿色大道88号',
        companyType: '新能源'
      }
    ],
    jobList: [
      {
        jobId: 'JOB789',
        name: '数据分析师',
        companyName: '数字创新',
        salary: '18k-35k',
        tags: 'Python, SQL, Data Mining',
        location: '深圳',
        hr: '王五',
        description: '负责数据分析和业务洞察...',
        degree: '硕士',
        experience: '2-5年'
      },
      {
        jobId: 'JOB101',
        name: '产品经理',
        companyName: '创新工场',
        salary: '20k-40k',
        tags: 'Agile, UX/UI Design, Product Management',
        location: '杭州',
        hr: '赵六',
        description: '负责产品规划与迭代管理...',
        degree: '本科',
        experience: '3-6年'
      },
      {
        jobId: 'JOB112',
        name: '云架构师',
        companyName: '云端科技',
        salary: '25k-50k',
        tags: 'AWS, Azure, Kubernetes',
        location: '广州',
        hr: '孙七',
        description: '负责云平台架构设计与优化...',
        degree: '本科及以上',
        experience: '5年以上'
      },
    ]
  },
  {
    company: [
      {companyId: 'COMP11111',
        name: '绿动未来能源',
        phone: '021-22223333',
        introduction: '专注于绿色能源的研发与应用，推动清洁能源的普及与发展。',
        status: 'A轮',
        size: '50-100人',
        address: '上海市浦东新区绿色大道88号',
        companyType: '新能源'
      }
    ],
    jobList: [
      {
        jobId: 'JOB222',
        name: '新能源研究员',
        companyName: '绿动未来',
        salary: '12k-25k',
        tags: 'Solar Energy, Wind Power, Energy Storage',
        location: '南京',
        hr: '周八',
        description: '负责新能源技术研究与开发...',
        degree: '硕士及以上',
        experience: '不限'
      },
      {
        jobId: 'JOB333',
        name: '环保工程师',
        companyName: '绿动力',
        salary: '15k-30k',
        tags: 'Waste Management, Environmental Assessment',
        location: '成都',
        hr: '吴九',
        description: '负责环保项目的设计与实施...',
        degree: '本科',
        experience: '2年以上'
      },
      {
        jobId: 'JOB444',
        name: '市场推广专员',
        companyName: '未来能源',
        salary: '8k-15k',
        tags: 'Marketing Strategy, Social Media, PR',
        location: '武汉',
        hr: '郑十',
        description: '负责品牌推广与市场活动策划...',
        degree: '大专及以上',
        experience: '1-3年'
      },
    ]
  },
])

async function GetpopularCompanyAndJob(){
  let res = await getPopularCompanyAndJobService()
  popularCompanyAndJob.value = res.data
}

GetpopularCompanyAndJob()

const jobList = ref([
  {
    jobId: 'JOB123',
    name: '软件工程师',
    companyName: '示例科技',
    salary: '15k-30k',
    tags: 'Java, Spring Boot, Docker',
    location: '上海',
    hr: '张三',
    description: '负责软件开发...',
    degree: '本科',
    experience: '3-5年'
  },
  {
    jobId: 'JOB456',
    name: '前端开发者',
    companyName: '创新网络',
    salary: '12k-25k',
    tags: 'Vue.js, React, HTML/CSS',
    location: '北京',
    hr: '李四',
    description: '负责网站前端架构设计与开发...',
    degree: '专科',
    experience: '2-4年'
  },
  {
    jobId: 'JOB789',
    name: '产品经理',
    companyName: '数字先锋',
    salary: '20k-40k',
    tags: '产品规划, 用户研究, 项目管理',
    location: '广州',
    hr: '王五',
    description: '负责产品的需求调研、设计及迭代管理...',
    degree: '硕士',
    experience: '5年以上'
  },
  {
    jobId: 'JOB101',
    name: '数据分析师',
    companyName: '智能数据',
    salary: '18k-35k',
    tags: 'SQL, Python, 数据挖掘',
    location: '深圳',
    hr: '赵六',
    description: '负责数据收集、清洗、分析及报告撰写...',
    degree: '本科',
    experience: '3-5年'
  }
]);

const selectedSalaryRange = ref('');
const selectedCity = ref('');
const location = ref([
  {
    value: 'shanghai',
    label: '上海',
    children: [
      {
        value: 'shanghai',
        label: '上海',
      },

    ],
  },
  {
    value: '江苏',
    label: '江苏',
    children: [
      {
        value: '南京',
        label: '南京',
      },

    ],
  },
  {
    value: '北京',
    label: '北京',
    children: [
      {
        value: '北京',
        label: '北京',
      },

    ],
  },
  {
    value: '广东',
    label: '广东',
    children: [
      {
        value: '深圳',
        label: '深圳',
      },

    ],
  },
]);
const onSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 2) {
    const secondLevelValue = selectedValues[1];
    const findSecondLevelLabel = (options: any[]) => {
      for (const option of options) {
        if (option.children) {
          for (const child of option.children) {
            if (child.value === secondLevelValue) {
              return child.label;
            }
          }
        }
      }
      return null;
    };
    selectedCity.value = findSecondLevelLabel(location.value);

  }
};

// 定义一个ref来保存原始的职位列表数据
const originalJobsList = ref([]);

const pageNum = ref(1)
const total = ref(20)
const pageSize = ref(3)

//获取热门职位
async function getJobList() {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    salary: selectedSalaryRange.value,
    city: selectedCity.value,
  };
  let res = await getTopJobService(params);
  jobList.value = res.data.item;
  total.value = res.data.total;
  originalJobsList.value = res.data.item;
}

getJobList();

const applyFilters = async () => {

  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    salary: selectedSalaryRange.value,
    city: selectedCity.value,
  };
  let res = await getTopJobService(params);
  jobList.value = res.data.item;
  total.value = res.data.total;
  if(jobList.value.length === 0)
    ElMessage.error("没有符合条件的职位");

  // // 计算薪资范围的最小值和最大值
  // let minSalary = 0;
  // let maxSalary = Number.POSITIVE_INFINITY; // 初始化为正无穷大，表示没有上限
  //
  // switch (selectedSalaryRange.value) {
  //   case '1': // 3k以下
  //     minSalary = 3 * 12;
  //     maxSalary = 5 * 12;
  //     break;
  //   case '2': // 3-5k
  //     minSalary = 3 * 12;
  //     maxSalary = 5 * 12;
  //     break;
  //   case '3': // 5-10k
  //     minSalary = 5 * 12;
  //     maxSalary = 10 * 12;
  //     break;
  //   case '4': // 10-20k
  //     minSalary = 10 * 12;
  //     maxSalary = 20 * 12;
  //     break;
  //   case '5': // 20-50k
  //     minSalary = 20 * 12;
  //     maxSalary = 50 * 12;
  //     break;
  //   case '6': // 50k以上
  //     minSalary = 50 * 12;
  //     break;
  //   default:
  //     // 对于"不限"或其他未预料到的值，不应用特定的薪资筛选
  //     break;
  // }
  // // 应用过滤条件
  // const filteredData = originalJobsList.value.filter(job => {
  //     const cityMatches = selectedCity.value === '' || job.location.includes(selectedCity.value);
  //     const salaryMatches = job.salaryYear <= maxSalary && job.salaryYear >= minSalary;
  //
  //   if(selectedSalaryRange.value === '不限')
  //     return cityMatches;
  //   return salaryMatches && cityMatches;
  // });
  // // 将过滤后的数据写回至RecommendedJobList
  // if(filteredData.length !== 0){
  //   jobList.value = filteredData;
  // }
  // else
  //   ElMessage.error("没有符合条件的职位");
};

// 监听筛选条件变化
watch([selectedSalaryRange, selectedCity], () => {
  applyFilters();
}, { deep: true });

const onSizeChange = (size) => {
  pageSize.value = size
  getJobList()
}

const onCurrentChange = (num) => {
  pageNum.value = num;
  getJobList()
}


const popularjob = ref([
  {
    jobId: 'JOB123',
    name: '软件工程师',
    companyName: '示例科技',
    salary: '15k-30k',
    tags: 'Java, Spring Boot, Docker',
    location: '上海',
    hr: '张三',
    description: '负责软件开发...',
    degree: '本科',
    experience: '3-5年'
  },
  {
    jobId: 'JOB456',
    name: '前端开发者',
    companyName: '创新网络',
    salary: '12k-25k',
    tags: 'Vue.js, React, HTML/CSS',
    location: '北京',
    hr: '李四',
    description: '负责网站前端架构设计与开发...',
    degree: '专科',
    experience: '2-4年'
  },
  {
    jobId: 'JOB789',
    name: '产品经理',
    companyName: '数字先锋',
    salary: '20k-40k',
    tags: '产品规划, 用户研究, 项目管理',
    location: '广州',
    hr: '王五',
    description: '负责产品的需求调研、设计及迭代管理...',
    degree: '硕士',
    experience: '5年以上'
  },
  {
    jobId: 'JOB101',
    name: '数据分析师',
    companyName: '智能数据',
    salary: '18k-35k',
    tags: 'SQL, Python, 数据挖掘',
    location: '深圳',
    hr: '赵六',
    description: '负责数据收集、清洗、分析及报告撰写...',
    degree: '本科',
    experience: '3-5年'
  }
])

//获取热门公司的岗位
async function getPopularJob() {
  let res = await getPopularJobService()
  popularjob.value = res.data
}

getPopularJob()

function GOTOJobDetails(jobId){
  router.push(`/JobDetails/${jobId}`)
}

function GOTOPerson(){
  router.push(`/UserPersonalPage`)
}

function gotoJobDetail(jobId){
  console.log("职位")
  router.push(`/JobDetails/${jobId}`)
}

function gotoCompanyDetail(companyId){
  console.log("公司")
  // router.push(`/CompanyDetails/${companyId}`)
}


</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link active" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link" v-if="userInfo.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Banner Area -->
  <section class="banner-area ptb-100">
    <div class="d-table">
      <div class="d-table-cell">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-lg-7">
              <div class="banner-content">
                <h1>好工作都在这</h1>
                <p>找事儿，一期搞定</p>

                <div class="search-job">
                  <el-form :model="searchForm" class="form-login-signup">
                    <el-row :gutter="20">
                      <!-- 调整第一列和第二列共占12列中的20（即各自10列），剩余空间留给按钮 -->
                      <el-col :span="8">
                        <el-form-item prop="jobTitle" class="input-with-icon">
                          <el-input
                              v-model="searchForm.jobTitle"
                              placeholder="搜索岗位"
                              :prefix-icon="Search"
                              size="large"
                              class="custom-input"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="location" class="input-with-icon">
                          <el-input
                              v-model="searchForm.location"
                              placeholder="搜索城市"
                              :prefix-icon="Location"
                              class="custom-input"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <!-- 按钮自动填充剩余空间 -->
                      <el-col :span="4">
                        <el-button
                            @click="searchJobs"
                            type="primary"
                            class="btn-search"
                        >
                          <i class="bx bx-search"></i>
                          找工作
                        </el-button>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>

                <div class="total-job-count">
                  <el-row>
                    <el-col :span="12">
                      <div class="job-count">
                        <h3>
                          <span>职位数量：</span>
                          {{ liveJobsCount }}
                        </h3>
                      </div>
                    </el-col>

                    <el-col :span="12">
                      <div class="job-count">
                        <h3>
                          <span>公司数量: </span>
                          {{ companiesCount }}
                        </h3>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>

            <div class="col-lg-5">
              <div class="banner-img">
                <img src="@/assets/JOB1.png">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Banner Area -->

  <!-- Start Testimonials Area Three -->
  <div class="working-area bg-color pt-100 pb-70">
    <div class="container">
      <div class="section-title">
        <span>职位展示</span>
        <h2>热门的职业</h2>

        <div class="scroll-bar">
          <el-carousel :interval="4000" type="card" height="320px" width="10000px">
            <el-carousel-item v-for="(job, index) in popularjob" :key="job.jobId" class="job-card" @click="GOTOJobDetails(job.jobId)">
              <div>
                <h3 class="scroll-job-title medium">{{ job.name }}</h3>
                <div class="scroll-company-info">
                  <p class="scroll-company-name">{{ job.companyName }}</p>
                  <p class="scroll-hr-contact">HR联系人: {{ job.hr }}</p>
                  <p class="scroll-job-location">地点: {{ job.location }}</p>
                </div>
                <p class="scroll-job-tags">{{ job.tags }}</p>
                <p class="scroll-job-requirements">{{ job.degree }} {{ job.salary }}</p>
                <div class="scroll-job-description">{{ job.description.substring(0, 30) + '...' }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

      </div>

    </div>
  </div>
  <!-- End  Testimonials Area Three -->

  <!-- Start Partner Area -->
  <div class="company-job-area bg-color pt-100 pb-70">
    <div class="container">
      <div class="section-title">
        <span>公司推荐</span>
        <h2>最热门的公司</h2>
        <div class="company-job-bar">

          <div
              v-for="(company, companyIndex) in popularCompanyAndJob"
              :key="company.companyId"
              class="company-container"
              @click="gotoCompanyDetail(company.companyId)"
          >

            <div class="company-info" @click.stop>
              <h3>{{ company.company.name }}</h3>
              <p><strong>公司类型:</strong> {{ company.company.companyType }}</p>
              <p><strong>地址:</strong> {{ company.company.address }}</p>
            </div>

            <div class="job-list">
              <h4>热门职位</h4>
              <ul>
                <li
                    v-for="(job, jobIndex) in company.jobList.slice(0, 3)"
                    :key="`${companyIndex}-${job.jobId}`"
                    class="job-list-card"
                    @click="gotoJobDetail(job.jobId)"
                >
                  <strong>{{ job.name }}</strong> - {{ job.salary }}
                  <p>{{ job.degree }} {{ job.experience }} {{ job.tags }}</p>
                </li>
              </ul>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
  <!-- End Partner Area -->

  <!-- Start Live Jobs Area -->
<!--  <section class="live-jobs-area bg-color ptb-100">-->
<!--    <div class="container">-->
<!--      <div class="row">-->

<!--        <div class="col-lg-8">-->
<!--          <div class="section-title">-->
<!--            <span>浏览类别</span>-->
<!--            <h2>今日职位总数</h2>-->
<!--          </div>-->

<!--          <div class="live-jobs-item">-->
<!--            <div class="row">-->
<!--              <div-->
<!--                  v-for="(jobData, index) in industryJobNum"-->
<!--                  :key="index"-->
<!--                  class="col-lg-2 col-sm-6"-->
<!--              >-->
<!--                <div class="single-live-job">-->
<!--                  <i class="flaticon-business"></i> &lt;!&ndash; 根据行业调整图标 &ndash;&gt;-->
<!--                  <a :href="'job-listing.html?category=' + jobData.industry">-->
<!--                    {{ jobData.industry }} ({{ jobData.num }})-->
<!--                  </a>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="col-lg-4">-->
<!--          <div class="hiring-list">-->
<!--            <h3>立即入职</h3>-->
<!--            <ul>-->
<!--              <li v-for="(job, index) in popularjob" :key="job.jobId">-->
<!--                <a href="job-details.html" class="hiring-img">-->
<!--                  <img src="@/assets/images/oneself-image/工作信息.png" alt="Company Logo">-->
<!--                </a>-->
<!--                <a href="job-details.html" class="link">{{ job.name }}</a>-->
<!--                <span>{{ job.salary }}, {{ job.location }}</span>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
<!--    </div>-->
<!--  </section>-->
  <!-- End Live Jobs Area -->

  <!-- Start Hot Jobs Area -->
  <section class="hot-jobs-area bg-color pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <div class="section-title">
            <span>热门岗位</span>
            <h2>职位展示</h2>
          </div>

          <div class="row flex-container">
            <div class="flex-item">
              <label for="salary-range" class="filter-label">薪资范围：</label>
              <el-select
                  id="salary-range"
                  v-model="selectedSalaryRange"
                  placeholder="请选择"
                  class="el-select-custom-width"
              >
                <el-option label="不限" value="不限"></el-option>
                <el-option label="3k以下" value="1-3"></el-option>
                <el-option label="3-5k" value="3-5"></el-option>
                <el-option label="5-10k" value="5-10"></el-option>
                <el-option label="10-20k" value="10-20"></el-option>
                <el-option label="20-50k" value="20-50"></el-option>
                <el-option label="50k以上" value="50-100"></el-option>
              </el-select>
            </div>


            <div class="flex-item">
              <label for="city" class="filter-label">城市：</label>

              <el-cascader :options="location" v-model="selectedCity" @change="onSelectChange" popper-class="custom-cascader-menu">
                <template #default="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>

            </div>
          </div>

          <div v-for="(job, index) in jobList" :key="index" class="hot-jobs-list">
            <div class="row align-items-center">
              <div class="col-lg-2">
              </div>

              <div class="col-lg-6">
                <div class="hot-jobs-content">
                  <h3>
                    <a :href="'job-details.html#' + job.jobId">{{ job.name }}</a>
                  </h3>
                  <span class="sub-title">{{ job.companyName }}</span>
                  <ul>
                    <li><span>学历要求：</span> {{ job.degree }}</li>
                    <li><span>经验要求：</span> {{ job.experience }}</li>
                    <li><span>地址: </span> {{ job.location }}</li>
                  </ul>
                </div>
              </div>

              <div class="col-lg-4">
                <div class="hot-jobs-btn">
                  <a href="" @click="GOTOJobDetails(job.jobId)" class="default-btn">查看详情</a>
                </div>
              </div>
              <span class="featured">{{ job.salary }}</span>
            </div>
          </div>

          <el-pagination
              v-model:current-page="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[3, 4, 5, 10]"
              layout="jumper, total, sizes, prev, pager, next"
              background
              :total="total"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
              style="margin-top: 20px;

              justify-content: flex-end" />


        </div>

        <div class="col-lg-4">
          <div class="hot-jobs-sidebar">
            <div class="hot-job-sidebar">
              <img src="@/assets/images/hot-jobs/hot-jobs-sidebar-img.jpg" alt="Image">

              <div class="hot-job-sidebar-content" @click="GOTOPerson()">
                <h3>完善信息，引导页面</h3>

                <ul>
                  <li>
                    <span>1</span>
                    <a href="#">用户/公司选择</a>
                  </li>
                  <li>
                    <span>2</span>
                    <a href="#">基本信息</a>
                  </li>
                  <li>
                    <span>3</span>
                    <a href="#">教育背景</a>
                  </li>
                  <li>
                    <span>4</span>
                    <a href="#">求职意向</a>
                  </li>
                  <li>
                    <span>5</span>
                    <a href="#">工作资历
                    </a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="hot-job-sidebar">
              <div class="hot-job-sidebar-content quick-link">
                <h3>快速链接</h3>

                <ul>
                  <li>
                    <i class="bx bx-chevrons-right"></i>
                    <a href="" @click="router.push('/RecommendJobPage')">推荐工作</a>
                  </li>
                  <li>
                    <i class="bx bx-chevrons-right"></i>
                    <a href="" @click="router.push('/JobList')">搜索工作</a>
                  </li>
                  <li>
                    <i class="bx bx-chevrons-right"></i>
                    <a href="" @click="router.push('/UserPersonalPage')">个人页面</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Hot Jobs Area -->


  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.0.
      </p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->

</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";


.custom-input {
  width: 95% !important; /* 使用!important覆盖可能的内联样式 */
  height: 36px;
}

.btn-search {
  border-radius: 20px; /* 圆角 */
  background-color: #2041e1; /* 蓝色背景 */
  color: white; /* 文本白色 */
  padding: 8px 16px; /* 内边距，可以根据需要调整 */
  font-size: 14px; /* 字体大小 */
  border: none; /* 移除默认边框 */
  cursor: pointer; /* 鼠标悬停时指针变为手型 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 鼠标悬停时的样式变化 */
.btn-search:hover {
  background-color: rgba(32, 65, 225, 0.78); /* 更深的蓝色背景，增加深度感 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 点击时的样式变化（可选） */
.btn-search:active {
  transform: scale(0.98); /* 稍微缩小，模拟按下效果 */
  box-shadow: none; /* 移除阴影，让按钮看起来更扁平 */
}


.el-select-custom-width {
  width: 200px; /* 根据需要调整宽度 */
}

.filter-label {
  margin-right: 8px;
}

.flex-container {
  display: flex; /* 启用Flex布局 */
  justify-content: space-around; /* 或使用space-between根据偏好调整间距 */
  margin-bottom: 30px;
  margin-left: 10px;
}

.flex-item {
  display: flex; /* 使内部元素（标签和下拉框）也采用Flex布局 */
  align-items: center; /* 垂直居中对齐 */
  flex: 1; /* 允许每个筛选条件块根据可用空间自适应宽度 */
}

.el-select-custom-width {
  width: 55%;
}


.el-carousel__item:nth-child(2n) {
  background-color: #fdfdfd;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #fdfdfd;
}

/* 自定义样式 */
.job-card {
  text-align: center; /* 文本居中 */
  padding: 16px; /* 内边距 */
  box-sizing: border-box; /* 确保内边距计算在总宽度内 */
  height: 100%; /* 保证内容区域充满整个轮播卡片 */
  display: flex;
  flex-direction: column; /* 内容垂直排列 */
  justify-content: space-around; /* 垂直居中对齐内容 */
  border-radius: 20px 0 20px 0; /* 只在顶部的左右角应用圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border: 1px solid transparent; /* 添加透明边框作为基础样式 */
}

.job-card:hover {
  border-color: #2041e1; /* 鼠标悬停时边框变蓝 */
}

/* 如果需要进一步优化显示，可以针对特定内容添加样式 */
.job-card p {
  margin: 0; /* 移除段落默认的外边距 */
  line-height: 1.5; /* 调整行高以改善阅读性 */
}

/* 可能需要调整轮播卡片的大小以适应内容，这取决于你的设计需求 */
.el-carousel__item {
  width: 400px !important; /* 调整卡片宽度 */
  height: 300px;
  min-height: 200px; /* 设置最小高度，确保有足够的空间显示内容 */
  margin-right: -2px; /* 负值等于边框宽度，消除右侧额外间距 */
}


/* 公司信息样式 */
.scroll-company-info {
  margin-bottom: 8px;
}

.scroll-company-name {
  font-weight: bold;
  color: #2041e1;
}

.scroll-hr-contact,
.scroll-job-location {
  color: #6c757d; /* 较淡的颜色用于辅助信息 */
}

/* 职位标签样式 */
.scroll-job-tags {
  color: #999;
  font-size: 0.9em;
  margin-bottom: 4px;
}

/* 职位要求样式 */
.scroll-job-requirements {
  color: #343a40; /* 使用深色强调重要信息 */
}

/* 职位描述样式 */
.scroll-job-description {
  color: #495057;
  font-size: 0.9em;
  line-height: 1.6;
  white-space: normal; /* 确保多行文本显示 */
  overflow-wrap: break-word; /* 使长单词换行 */
}

/* 标题样式 */
.scroll-job-title {
  margin-bottom: 4px;
  color: #343a40;
}


/* 基础样式 */
.company-job-area {
  background-color: #f5f5f9; /* 背景色 */
  padding: 100px 0; /* 上下内边距 */
}

.container {
  max-width: 1200px; /* 容器最大宽度 */
  margin: 0 auto; /* 水平居中 */
}


.section-title h2 {
  font-size: 36px;
  margin: 0;
}

.company-job-bar {
  margin-top: 20px;
}

.company-job-bar {
  display: flex; /* 启用Flex布局 */
  flex-wrap: nowrap; /* 确保元素都在同一行，避免换行 */
  justify-content: center; /* 在元素间平均分配空间，实现间距效果 */
  /* 或者使用 space-evenly 如果希望首尾也有同样的间距 */
}

/* 由于我们使用了外部容器的Flex布局，公司容器的宽度应适应Flex项的宽度 */
.company-container {
  min-width: 400px;
  margin-right: 10px;
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

/* 公司信息样式 */
.company-container {
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border: 2px solid rgb(253, 253, 253); /* 蓝色边框 */
  border-radius: 8px;
  margin-bottom: 30px;
  padding: 30px;
  width: 400px;
}

/* 悬停效果 */
.company-container:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 加强阴影，使悬停时更加突出 */
  transform: translateY(-2px); /* 给予轻微的上移，增加交互反馈 */
  border-color: rgba(63, 157, 253, 1); /* 鼠标悬停时边框颜色变为完全不透明 */
}

/* 点击效果（假设通过某些方式触发active状态，这里仅展示样式） */
.company-container:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 点击时减少阴影，模拟按下效果 */
  transform: translateY(2px); /* 点击时轻微下移 */
}

.company-info h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.company-info p {
  margin-bottom: 10px;
}

/* 职位列表样式 */
.job-list {
  margin-top: 30px;
}

.job-list h4 {
  font-size: 20px;
  margin-bottom: 10px;
}

.job-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.job-list li {
  margin-bottom: 10px;
  border: 2px solid rgba(63, 157, 253, 0.5); /* 蓝色边框 */
  border-radius: 8px; /* 保持圆角，可根据需要调整 */
  min-height: 60px;
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

/* 悬停效果 */
.job-list li:hover {
  border-color: rgba(63, 157, 253, 1); /* 鼠标悬停时边框颜色变为完全不透明 */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
  transform: translateY(-2px); /* 微微上移，增加交互反馈 */
}

/* 激活（点击）效果，这里假设使用了某种方法来标记激活状态，例如添加一个类 `.active` */
.job-list li:active {
  background-color: rgba(63, 157, 253, 0.1); /* 背景变为淡蓝色 */
  border-color: rgba(63, 157, 253, 1); /* 边框颜色变为完全不透明 */
  color: #000; /* 假设文本颜色变为深色，以保证对比度 */
}

.job-list li strong {
  font-weight: bold;
  display: inline-block;
  width: 120px; /* 职位名称固定宽度 */
  margin-right: 10px;
}
</style>